<template>
  <div v-loading="loading">
      <div class="content-top">
        <span class="h1">报表查询</span>
        <span class="h2">进度统计表</span>
		</div>
    
    <div class="title">
      统计表2 （  {{proStr}}    ）征地拆迁进度汇总表<span style="font-size: 14px;">(按已支付)</span>
    </div>

    <div class="fbhead">
      <div class="address clearfix">
        
          <label for="">统计范围:</label>
          <el-select v-model="stateValue" placeholder="请选择" filterable clearable >
                <el-option
                v-for="item in StateRange"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
          <!-- <el-radio-group v-model="range" class="radios">
            <el-radio :label="1">已支付</el-radio>
            <el-radio :label="2">已审批</el-radio>
          </el-radio-group> -->
          <label for="">单位:</label>
          <el-radio-group v-model="company"  class="radios">
            <el-radio :label="1">m<sup>2</sup></el-radio>
            <el-radio :label="2">亩</el-radio>
          </el-radio-group>
          <div class="fr" style="display:inline-block">
            <label for="">工程项目:</label>
            <el-select v-model="proValue" placeholder="请选择" filterable >
                <el-option
                v-for="item in project"
                :key="item.ID"
                :label="item.Name"
                :value="item.ID">
                </el-option>
            </el-select>
              <el-button type="primary" @click="fnSearch">查询</el-button>
              <span class="fr" style="padding-top: 5px;">{{datas | Format}}</span>
            </div>

          
      </div>
    </div>
    <div class="tables">
      <el-tabs v-model="activeTab" @tab-click="handleClick">
    <el-tab-pane label="表格" name="table" class="clearfix">
      <!-- <span class="date fr">2018年4月12日</span> -->
        <table  cellspacing="0" cellpadding="0" border="0" style="width:100%;">
          <thead>
            <tr>
              <th rowspan="2">行政区域</th>
              <th rowspan="2">项目KM或亩</th>
              <th colspan="4" bgcolor="#f0f9eb">1土地征用</th>
              <th bgcolor="#EBF5FF">2竹木果树类</th>
              <th colspan="4" bgcolor="#f0f9eb">3房屋主体</th>
              <th bgcolor="#EBF5FF">4房屋装饰</th>
              <th colspan="4" bgcolor="#f0f9eb">5坟山搬迁</th>
              <th bgcolor="#EBF5FF">6特殊征拆</th>
              <th>合计</th>
              <th rowspan="2">备注</th>
            </tr>
            <tr>
              <th bgcolor="#f0f9eb">数量</th>
              <th bgcolor="#f0f9eb">计划任务</th>
              <th bgcolor="#f0f9eb">进度(%)</th>
              <th bgcolor="#f0f9eb">金额(元)</th>

              <th bgcolor="#EBF5FF">金额(元)</th>

              <th bgcolor="#f0f9eb">数量</th>
              <th bgcolor="#f0f9eb">计划任务</th>
              <th bgcolor="#f0f9eb">进度(%)</th>
              <th bgcolor="#f0f9eb">金额(元)</th>
              <th bgcolor="#EBF5FF">金额(元)</th>

              <th bgcolor="#f0f9eb">数量</th>
              <th bgcolor="#f0f9eb">计划任务</th>
              <th bgcolor="#f0f9eb">进度(%)</th>
              <th bgcolor="#f0f9eb">金额(元)</th>
              <th bgcolor="#EBF5FF">金额(元)</th>
              <th>金额(元)</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in dataRows" :key="index">
              <td>{{item.Regions}}</td>
              <td>{{item.Projects}}</td>
              <td bgcolor="#f0f9eb">{{item.LandAmount}}</td>
              <td bgcolor="#f0f9eb">{{item.LandPlan}}</td>
              <td bgcolor="#f0f9eb">{{item.LandPlanPercent}}</td>
              <td bgcolor="#f0f9eb">{{item.LandMoney}}</td>
              <td bgcolor="#EBF5FF">{{item.GreenMoney}}</td>
              <td bgcolor="#f0f9eb">{{item.HouseAmount}}</td>
              <td bgcolor="#f0f9eb">{{item.HousePlan}}</td>
              <td bgcolor="#f0f9eb">{{item.HousePercent}}</td>
              <td bgcolor="#f0f9eb">{{item.HouseMoney}}</td>
              <td bgcolor="#EBF5FF">{{item.HouseExMoney}}</td>
              <td bgcolor="#f0f9eb">{{item.GraveAmount}}</td>
              <td bgcolor="#f0f9eb">{{item.GravePlan}}</td>
              <td bgcolor="#f0f9eb">{{item.GarvePercent}}</td>
              <td bgcolor="#f0f9eb">{{item.GraveMoney}}</td>
              <td bgcolor="#EBF5FF">{{item.OtherMoney}}</td>
              <td>{{item.TotalMoney}}</td>
              <td>{{item.Memo}}</td>
            </tr>
          </tbody>
          <tfoot v-if="dataSumRow!=null">
            <tr>
              <td colspan="2">合计</td>
              <!-- <td>{{dataSumRow.Projects}}</td> -->
              <td>{{dataSumRow.LandAmount}}</td>
              <td>{{dataSumRow.LandPlan}}</td>
              <td>{{dataSumRow.LandPlanPercent}}</td>
              <td>{{dataSumRow.LandMoney}}</td>
              <td>{{dataSumRow.GreenMoney}}</td>
              <td>{{dataSumRow.HouseAmount}}</td>
              <td>{{dataSumRow.HousePlan}}</td>
              <td>{{dataSumRow.HousePercent}}</td>
              <td>{{dataSumRow.HouseMoney}}</td>
              <td>{{dataSumRow.HouseExMoney}}</td>
              <td>{{dataSumRow.GraveAmount}}</td>
              <td>{{dataSumRow.GravePlan}}</td>
              <td>{{dataSumRow.GarvePercent}}</td>
              <td>{{dataSumRow.GraveMoney}}</td>
              <td>{{dataSumRow.OtherMoney}}</td>
              <td>{{dataSumRow.TotalMoney}}</td>
              <td></td>
            </tr>
            
          </tfoot>
      </table>
    </el-tab-pane>
    <el-tab-pane label="图表" name="chart">
      <div id="chart"></div>
    </el-tab-pane>
  </el-tabs>
      
    </div>
  </div>
</template>
<script>
import api from "../../axios/api";
// 引入 ECharts 主模块
const echarts = require("echarts/lib/echarts");
// 引入柱状图
require("echarts/lib/chart/bar");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
export default {
  name: "SpeedReport",
  data() {
    return {
      loading: false,
      search: "",
      activeTab: "chart",
      range: 1, //范围
      company: 1, //单位
      project: [],
      proValue: "",
      proStr: "",
      stateValue: 6, //范围值
      StateRange: [
        {
          value: 1,
          label: "上报的数据"
        },
        {
          value: 2,
          label: "乡镇已审核"
        },
        {
          value: 3,
          label: "县级已审核"
        },
        {
          value: 4,
          label: "业主已审核"
        },
        {
          value: 5,
          label: "合同打印"
        },
        {
          value: 6,
          label: "已支付"
        },
        {
          value: 7,
          label: "已撤销"
        }
      ],
      xData: [], //X轴数据   区域
      LandData: [], //土地 进度数据
      HouseData: [], //房屋主体 进度数据
      GraveData: [], //坟山 进度数据
      dataRows: [],
      dataSumRow: "",
      datas: new Date(),
    };
  },
  filters: {
			Format: function(fmt) {
				if(fmt) {
					let date = new Date(fmt);
					let y = date.getFullYear()
					let m = date.getMonth() + 1
					let d = date.getDate()
					let s = date.getHours() // 小时
					let f = date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes()// 分
					let g = date.getSeconds()<10?'0'+date.getSeconds():date.getSeconds() // 秒
					return y + '-' + m + '-' + d + ' ' + s + ':' + f + ':' + g;
				} else {
					return ''
				}
			}
		},
  mounted() {
  	setInterval(()=>{
				this.datas = new Date()
			},1000)
    this.zList();
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    echarts() {
      var myChart = echarts.init(document.getElementById("chart"));
      myChart.setOption({
        color: ["#CDC477", "#006699", "#4cabce"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          orient: "horizontal",
          show: true,
          data: ["土地征用", "房屋主体", "坟山搬迁"]
        },
        xAxis: [
          {
            type: "category",
            data: this.xData,
            axisLabel:{ //调整x轴的lable  
		            textStyle:{
		                fontSize:18 // 让字体变大
		            }
		        }
          }
        ],
        yAxis: [
          {
            type: "value",
//          max: "100",
            axisLabel: {
              formatter: "{value} %"
            }
          }
        ],
        series: [
          {
            name: "土地征用",
            type: "bar",
            data: this.LandData,
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: "{c}%",
                textStyle: {
                  color: "black",
                  fontSize: "16"
                }
              }
            }
          },
          {
            name: "房屋主体",
            type: "bar",
            data: this.HouseData,
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: "{c}%",
                textStyle: {
                  color: "black",
                  fontSize: "16"
                }
              }
            }
          },
          {
            name: "坟山搬迁",
            type: "bar",
            data: this.GraveData,
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: "{c}%",
                textStyle: {
                  color: "black",
                  fontSize: "16"
                }
              }
            }
          }
        ]
      });
    },
    //工程项目列表
    zList() {
      this.$post(api.getlistde)
        .then(response => {
          if (response.isOK == true && response.state == 200) {
            this.project = response.Data;
            this.proValue = this.project[0].ID;
            this.proStr = this.project[0].Name;
            this.getData();
          } else {
            this.loading = false;
            this.$message.error(response.msg);
          }
        })
        .catch(error => {
          this.loading = false;
        });
    },
    //获取表格数据
    getData() {
      this.xData = [];
      this.LandData = [];
      this.HouseData = [];
      this.GraveData = [];
      this.loading = true;
      this.$post(api.paydata1, {
        Unit: this.company,
        StateRange: this.stateValue,
        ProjectID: this.proValue
      })
        .then(response => {
          if (response.isOK == true && response.state == 200) {
            if (response.Data == null) {
              this.loading = false;
              this.dataRows = [];
              this.dataSumRow = "";
              this.$message.error("没有数据");
              return false;
            }
            this.dataRows = response.Data.Rows;
            this.dataSumRow = response.Data.SumRow;

            for (let i = 0; i < response.Data.Rows.length; i++) {
              this.xData.push(response.Data.Rows[i].Regions);
              this.LandData.push(response.Data.Rows[i].LandPlanPercent);
              this.HouseData.push(response.Data.Rows[i].HousePercent);
              this.GraveData.push(response.Data.Rows[i].GarvePercent);
            }

            this.echarts();
            this.loading = false;
          } else {
            this.loading = false;
            this.dataRows = [];
            this.dataSumRow = "";
            this.xData = [];
            this.LandData = [];
            this.HouseData = [];
            this.GraveData = [];
            this.$message.error(response.msg);
          }
        })
        .catch(error => {
          this.loading = false;
        });
    },
    fnSearch() {
      for (let i = 0; i < this.project.length; i++) {
        if (this.proValue == this.project[i].ID) {
          this.proStr = this.project[i].Name;
        }
      }
      this.getData();
    }
  }
};
</script>
<style scoped>
.fbhead {
  width: 100%;
}
.address {
  margin: 10px 0;
}
.title {
  width: 100%;
  font-size: 20px;
  text-align: center;
  font-weight: 600;
  margin: 10px auto;
  color: #909399;
}
.radios {
  margin-right: 20px;
}
.stage {
  display: inline-block;
  padding: 0 10px;
}
.date {
  display: inline-block;
  padding: 0 10px;
  line-height: 40px;
  font-size: 13px;
}
.tables table {
  color: #606266;
  margin: auto;
  border-collapse: collapse;
  font-size: 12px;
}
.tables table td,
.tables table th {
  text-align: center;
  padding: 5px;
  border: 1px solid #ebeef5;
}
#chart {
  width: 100%;
  height: 600px;
  margin: auto;
}
</style>